<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <!-- Logo -->
          <div class="flex-shrink-0">
            <router-link to="/" class="text-xl font-bold text-blue-600">
              HyperBoost
            </router-link>
          </div>

          <!-- 导航菜单 -->
          <nav class="hidden md:flex space-x-8">
            <router-link
              v-for="item in navItems"
              :key="item.path.name"
              :to="item.path"
              class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium"
              active-class="text-blue-600"
            >
              {{ item.title }}
            </router-link>
          </nav>

          <!-- 用户头像 -->
          <div class="relative">
            <UserAvatar />
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="pt-16">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'
import UserAvatar from '@/components/UserAvatar.vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 导航菜单项
const navItems = [
  { path: { name: 'Home' }, title: '首页' },
  { path: { name: 'Opportunity' }, title: '机会' },
  { path: { name: 'Share' }, title: '分享' },
  { path: { name: 'AI' }, title: 'AI助手' },
  { path: { name: 'Profile' }, title: '我的' }
]

// 获取用户信息
onMounted(async () => {
  if (userStore.isLoggedIn && !userStore.userInfo) {
    await userStore.fetchUserInfo().catch(error => {
      console.error('获取用户信息失败:', error)
    })
  }
})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 导航链接激活状态 */
.router-link-active {
  color: #409eff;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
}
</style> 